<template>
	<view class="tab-bar">
		<view class="tab-bar-border"></view>
		<view class="tab-bar-content">
			<view
				v-for="(item, index) in tabbarList"
				:key="index"
				class="tab-bar-item"
				@tap="handleItemClick(item, index)"
			>
				<!-- 主菜单项 -->
				<view class="tab-bar-item-content">
					<text class="tab-text" :class="{ active: currentTab === index }">{{ item.name || item.text || item.title }}</text>
					<image v-if="item.icon" :src="item.icon" mode="aspectFit" class="menu-icon"></image>
				</view>

				<!-- 子菜单 -->
				<view
					v-if="item.children && item.children.length"
					class="sub-menu"
					:class="{ open: isSubMenuOpen && currentTab === index }"
				>
					<view
						v-for="(subItem, subIndex) in item.children"
						:key="subIndex"
						class="sub-menu-item"
						@tap.stop="handleSubItemClick(subItem, index, subIndex)"
					>

						<text class="sub-text">{{ subItem.name || subItem.text || subItem.title }}</text>
						<image v-if="subItem.icon" :src="subItem.icon" mode="aspectFit" class="menu-icon"></image>
					</view>
				</view>
			</view>
		</view>

		<!-- 遮罩层 -->
		<view
			v-if="isSubMenuOpen"
			class="mask"
			@tap="closeSubMenu"
		></view>
	</view>
</template>

<script>
	import { indexList} from '@/api/product';
export default {
	name: 'TabBar',
	props: {
		list: {
			type: Array,
			default: () => [
				{
					icon: '',
					name: '首页',
					url: '/pages/index/index',
					icon: '/static/address/3.jpg',
					children: [
						{
							icon: '/static/address/3.jpg',
							name: '试剂试剂试剂试剂试剂',
							url: '/pages/products/reagent'
						},
						{
							icon: '/static/address/3.jpg',
							name: '仪器',
							url: '/pages/products/instrument'
						}
					]
				},
				{
					icon: '',
					name: '产品',
					icon: '/static/address/3.jpg',
					children: [
						{
							icon: '/static/address/3.jpg',
							name: '试剂',
							url: '/pages/products/reagent'
						},
						{
							icon: '',
							name: '仪器',
							url: '/pages/products/instrument'
						}
					]
				},
				{
					icon: '',
					name: '服务',
					url: '/pages/service/index'
				}
			]
		},
		current: {
			type: Number,
			default: 0
		}
	},
	mounted() {
		 uni.hideTabBar()
		 this.getIndexConfig()
	},

	data() {
		return {
			currentTab: this.current,
			isSubMenuOpen: false,
			tabbarList:[]
		}
	},
	watch: {
		current(val) {
			this.currentTab = val;
		}
	},
	methods: {
		// 获取商品列表
		async getIndexConfig(type) {
			await this.$http
				.get(`${indexList}`, {})
				.then(async r => {
					this.loading = false;
					if (type === 'refresh') {
						uni.stopPullDownRefresh();
					}
					this.tabbarList = r.data.tabbarList;
					console.log(this.tabbarList)
				})
				.catch(err => {
					this.errorInfo = err;
					this.loading = false;
					if (type === 'refresh') {
						uni.stopPullDownRefresh();
					}
				});
		},
		cGo(item) {
			const link = item.link || item.url;
			if (!link) return;

			try {
				// 标准化路径格式（去除前导/和查询参数）
				const normalizedLink = link.replace(/^\//, '').split('?')[0];

				// tabBar页面列表 - 从实际的pages.json同步更新
				const tabBarPages = [
					'pages/index/index',
					'pages/profile/profile'
				];

				// 判断是否为tabBar页面
				const isTabBarPage = tabBarPages.includes(normalizedLink);

				if (isTabBarPage) {
					uni.switchTab({
						url: `/${normalizedLink}`,
						fail: (err) => {
							console.error('switchTab failed:', err);
							// 如果switchTab失败，回退到普通导航
							uni.navigateTo({ url: link });
						}
					});
				} else {
					uni.navigateTo({
						url: link,
						fail: (err) => {
							console.error('navigateTo failed:', err);
						}
					});
				}
			} catch (error) {
				console.error('Navigation error:', error);
				// 发生错误时尝试普通导航
				uni.navigateTo({ url: link });
			}
		},
		handleItemClick(item, index) {
			if (item.children && item.children.length) {
				// 如果点击的是当前打开的菜单，则关闭
				if (this.currentTab === index && this.isSubMenuOpen) {
					this.isSubMenuOpen = false;
				} else {
					this.currentTab = index;
					this.isSubMenuOpen = true;
				}
			} else {
				this.isSubMenuOpen = false;
				this.currentTab = index;
				this.cGo(item);
				this.$emit('change', index);
			}
		},
		handleSubItemClick(item, parentIndex, index) {
			this.isSubMenuOpen = false;
			this.cGo(item);
			this.$emit('sub-change', {
				parentIndex,
				index,
				item
			});
		},
		closeSubMenu() {
			this.isSubMenuOpen = false;
		}
	}
}
</script>

<style lang="scss" scoped>
.tab-bar {
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	z-index: 991;


	.tab-bar-border {
		position: absolute;
		left: 0;
		top: 0;
		width: 100%;
		height: 1rpx;
		background: #f5f5f5;
		transform: scaleY(0.5);
	}

	.tab-bar-content {
		display: flex;
		height: 100rpx;
		padding:10rpx 0;
		background: #fff;
		box-shadow: 0 -2rpx 10rpx rgba(0, 0, 0, 0.05);

		.tab-bar-item {
			flex: 1;
			display: flex;
			align-items: stretch;
			position: relative;

			&:not(:last-child) {
				border-right: 2rpx solid #e5e5e5;
			}

			.tab-bar-item-content {
				flex: 1;
				display: flex;
				flex-direction: row;
				align-items: center;
				justify-content: flex-start;
				padding-left:40rpx;
				padding-right: 10rpx;
				box-sizing: border-box;
				min-width: 0;

				.tab-text {
					font-size: 24rpx;
					color: #666;

					text-align: center;
					overflow: hidden;
					text-overflow: ellipsis;
					white-space: nowrap;
					min-width: 0;
					padding: 0 10rpx;

					&.active {
						color: #2196F3;
					}
				}

				.menu-icon {
					width: 40rpx;
					height: 40rpx;
					flex: none;
					margin-left: 10rpx;
				}
			}

			.sub-menu {
				position: absolute;
				bottom: 100%;
				left: 0;
				width: 100%;
				background: #fff;
				border-radius: 12rpx 12rpx 0 0;
				transform: translateY(100%);
				opacity: 0;
				visibility: hidden;
				transition: all 0.2s ease;
				box-shadow: 0 -2rpx 10rpx rgba(0, 0, 0, 0.05);

				&.open {
					transform: translateY(0);
					opacity: 1;
					visibility: visible;
				}

				.sub-menu-item {
					height: auto; /* 改为自适应高度 */
					min-height: 90rpx; /* 保持最小高度 */
					display: flex;
					align-items: center;
					justify-content: flex-start;
					padding-left: 40rpx;
					padding-right: 10rpx;
					border-bottom: 1rpx solid #f5f5f5;
					box-sizing: border-box;
					width: 100%;

					.sub-text {
						font-size: 28rpx;
						color: #333;
						overflow: visible; /* 允许内容溢出 */
						white-space: normal; /* 允许换行 */
						word-break: break-all; /* 在任意字符间换行 */
						padding: 10rpx 0; /* 增加上下padding，确保文字有足够空间 */
					}

					.menu-icon {
						width: 36rpx;
						height: 36rpx;
						flex: none;
						margin-left: 10rpx;
					}

					&:last-child {
						border-bottom: none;
					}

					&:active {
						background: #f5f5f5;
					}
				}
			}
		}
	}

	.mask {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 100rpx;
		background: rgba(0, 0, 0, 0.5);
		z-index: -1;
	}
}

.nav-menu-main {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 32rpx 48rpx;
  font-size: 32rpx;
  color: #222;
  cursor: pointer;

  .arrow {
    font-size: 28rpx;
    color: #e53935;
    display: flex;
    align-items: center;
  }

  .menu-icon {
      width: 40rpx;
      height: 40rpx;
      margin-left: 20rpx;
  }
}

.nav-sub-menu-item {
  border-bottom: 1rpx solid #f0f0f0;

  .nav-menu-main {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 24rpx 48rpx;
    font-size: 28rpx;

    .arrow {
      font-size: 24rpx;
    }
  }
}

.nav-third-menu {
  background: #f5f5f5;

  .nav-third-menu-item {
    padding: 28rpx 72rpx;
    font-size: 28rpx;
    color: #333;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;

    .sub-icon {
      font-size: 28rpx;
      color: #666;
      margin-right: 20rpx;
      display: flex;
      align-items: center;
    }

    .sub-text {
      flex: 1;
    }

    .menu-icon {
        width: 36rpx;
        height: 36rpx;
        margin-left: 20rpx;
    }
  }
}

// 适配底部安全区
.safe-area-inset-bottom {
	padding-bottom: constant(safe-area-inset-bottom);
	padding-bottom: env(safe-area-inset-bottom);
}
</style>
